<script setup lang="ts">
import pageError from '@/assets/svgs/404.svg'
import networkError from '@/assets/svgs/500.svg'
import noPermission from '@/assets/svgs/403.svg'
import { propTypes } from '@/utils/propTypes'
import { getToken } from '@/utils/auth'
import { useRouter } from 'vue-router'
import { PropType } from 'vue'

interface ErrorMap {
  url: string
  message: string
  buttonText: string
}

const errorMap: {
  [key: string]: ErrorMap
} = {
	'404': {
		url: pageError,
		message: '抱歉，您访问的页面不存在。',
		buttonText: '返回首页'
	},
	'500': {
		url: networkError,
		message: '抱歉，服务器报告错误。',
		buttonText: '返回首页'
	},
	'403': {
		url: noPermission,
		message: '抱歉，您无权访问此页面',
		buttonText: '返回首页'
	}
}
// console.log('propTypes--', propTypes);
// console.log('propTypes.string--', propTypes.string);

const props = defineProps({
	type: {
		type: String as PropType<string>,
		default: propTypes.string.validate((value: unknown) => typeof value === 'string' && ['404', '500', '403'].includes(value)).def('404')
	}
})
// console.log('props--', props);

const emit = defineEmits(['errorClick'])
const { push, go } = useRouter()
const btnClick = () => {
	// emit('errorClick', props.type)
	const token = getToken()
	if (token) {
		// go(-1 as number)
		push('/home' as string)
	} else {
		push('/login' as string)
	}
}
</script>

<template>
    <div class="error flex justify-center">
        <div class="text-center">
            <img width="600" :src="errorMap[type].url" alt="" />
            <div class="notice">{{ errorMap[type].message }}</div>
            <div class="opt-box">
                <el-button type="info" plain @click="btnClick">{{ errorMap[type].buttonText }}</el-button>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.error {
  .notice {
    font-size: 14px;
    color: #909399;
  }
  .opt-box {
    margin-top: 20px;
  }
}
</style>
